/**
 * Created by sunyan on 2017/6/22.
 */

import * as d3 from 'd3'

/*
 *  扇形层 30deg/s
 *  扇形的高亮层 30deg/s 旋转一周12s
 * */
let timer1,
  step1 = 0;
function rotate1() {
  clearInterval(timer1)
  timer1 = setInterval(function () {
    step1++;
    if(step1 >= 1024){
      step1 = 0
    }
    let arc = 0.3515625*step1;
    animation.level3.setAttribute('style','transform: rotate('+arc+'deg)');
    animation.levelLight.setAttribute('style','transform: rotate('+arc+'deg)');
  },11.71875)
}
/*
 *  包围扇形的圆环层  15deg/s 旋转一周24s
 *  分类层  15deg/s
 * */
let timer2,
  step2 = 0;
function rotate2() {
  clearInterval(timer2)
  timer2 = setInterval(function () {
    step2++;
    if(step2 >= 1024){
      step2 = 0
    }
    let arc = 0.3515625*step2;
    animation.level8.setAttribute('style','transform: rotate(-'+arc+'deg)');
    animation.labels.setAttribute('style','transform: rotate('+arc+'deg)');
  },23.4735)
}

/*
 * 箭头层 8deg/s,旋转一周需要45s
 * */
let timer3,
  step3 = 0;
function rotate3() {
  clearInterval(timer3)
  timer3 = setInterval(function () {
    step3++;
    if(step3 >= 1024){
      step3 = 0
    }
    let arc = 0.3515625*step3;
    animation.level12.setAttribute('style','transform: rotate(-'+arc+'deg)');
  },43.9453125)
}
/*
 * delayRotateStart: 通过clsss控制不需要归位的层级的动画的开始
 * delayRotateStop:  通过clsss控制不需要归位的层级的动画的停止
 * lightUpArc: 高亮对应样式
 * clearLight: 清空原来高亮样式
 * getRotate: 获取rotate的值
 * lightLabels: 鼠标经过分类层
 * animationStart:  动画开始
 * */
let animation = {
  readyFunction(){

    this.level3=document.querySelector('#level3');
    this.levelLight=document.querySelector('#level-light');
    this.level8=document.querySelector('#level8');
    this.labels=document.querySelector('#labels');
    this.level12=document.querySelector('#level12');
    console.log('ready')

  },
  delayRotateStart(id,oldClassName,newClassName,time){
    if(time){
      let timer = id+'Time';
      timer = setTimeout(function () {
        document.querySelector('#'+id).setAttribute('class',oldClassName+' '+newClassName)
      },time)
    }else{
      document.querySelector('#'+id).setAttribute('class',oldClassName+' '+newClassName)
    }
  },
  delayRotateStop(id,className) {
    document.querySelector('#'+id).setAttribute('class',className)
  },
  lightUpArc(index){
    d3.select("#level8-"+index).attr('class','st1')  //高亮圆环
    d3.select("#classify_"+index).attr('class','st2')  //高亮扇形
    document.getElementById('light-'+index).className = 'light-'+index;
  },
  clearLight() {
    for(let k = 1; k <= 5; k++){
      d3.select("#level8-"+k).attr('class','st2')  //包围扇形的圆环透明度变为0.6
      d3.select("#classify_"+k).attr('class','st1') //所有的扇形透明度变为0.6
      document.getElementById('light-'+k).className = 'light-'+k+' none';  //所有的扇形高亮层都隐藏
    }
  },
  getRotate(id) {
    if(id==undefined) {
      console.log('未找到元素',id)
      return
    }
    //$('#'+id).attr('style')
    var style = document.getElementById('labels').style.cssText; //document.getElementById('labels').style.cssText
    if(style==''){
      console.log('没有style');
      return
    }
    let str = style.split(":")[1].trim() || false;
    if(!str) return;
    let rotate = str.substring(7,str.length-5)
    return rotate;
  },
  lightLabels(that) {
    let _this = that,
      _id = _this.attr('id');
    let key = this.arcMapClassify(_id);
    this.clearLight();
    this.lightUpArc(key)
    this.animationStop()
    let rotate = animation.getRotate('labels');
    this.level3.setAttribute('style','transform: rotate('+rotate+'deg)');  //扇形层归位
    this.levelLight.setAttribute('style','transform: rotate('+rotate+'deg)'); //扇形高亮层归位
    this.level8.setAttribute('style','transform: rotate('+rotate+'deg)');  //圆环层归位
    this.level12.setAttribute('style','transform: rotate('+rotate+'deg)');  //箭头层归位
    this.labels.setAttribute('style','transform: rotate('+rotate+'deg)');  //分类层归位
    _this.siblings('.label-box').removeClass('label-box-over')  //改变小分类的样式
    _this.addClass('label-box-over');
  },
  goBack(that){
    let _this = that,
      _id = _this.attr('id');
    let key = _id.split('_')[1]
    this.clearLight();
    this.lightUpArc(key)
    this.animationStop()
    let rotate = animation.getRotate('level3');

    this.level3.setAttribute('style','transform: rotate('+rotate+'deg)');  //扇形层归位
    this.levelLight.setAttribute('style','transform: rotate('+rotate+'deg)'); //扇形高亮层归位
    this.level8.setAttribute('style','transform: rotate('+rotate+'deg)');  //圆环层归位
    this.level12.setAttribute('style','transform: rotate('+rotate+'deg)');  //箭头层归位
    this.labels.setAttribute('style','transform: rotate('+rotate+'deg)');  //分类层归位
    _this.siblings('.label-box').removeClass('label-box-over')  //改变小分类的样式
    _this.addClass('label-box-over');
  },
  arcMapClassify(id){
    let obj = {
      1:['label-1','label-2'],
      2:['label-3','label-4','label-5'],
      3:['label-6','label-7'],
      4:['label-8','label-9','label-10','label-11'],
      5:['label-12','label-13','label-14','label-15','label-16','label-17']
    }
    let key;
    for(let k in obj){
      for(let m = 0 , mm = obj[k].length; m < mm; m ++){
        if(id == obj[k][m]){
          key = k;
          break;
        }
      }
    }
    return key;
  },
  animationStart() {
    this.delayRotateStart('level1','svg-level-1','rotate1',1500)
    this.delayRotateStart('level2','svg-level-2','rotate2',1500)
    this.delayRotateStart('level5','svg-level-5','rotate5',1500)
    this.delayRotateStart('level6','svg-level-6','rotate6',2000)
    this.delayRotateStart('level7','svg-level-7','rotate7',2000)
    this.delayRotateStart('level10','svg-level-10','rotate10',2500)
    this.delayRotateStart('level11','svg-level-11','rotate11',2500)
    this.delayRotateStart('labels','labels','rotate13',3000)
    rotate1()
    rotate2()
    rotate3()
    $('#level14').empty();
  },
  animationStop() {
    clearInterval(timer1)
    clearInterval(timer2)
    clearInterval(timer3)

    this.delayRotateStop('level1','svg-level-1')
    this.delayRotateStop('level2','svg-level-2')
    this.delayRotateStop('level5','svg-level-5')
    this.delayRotateStop('level6','svg-level-6')
    this.delayRotateStop('level7','svg-level-7')
    this.delayRotateStop('level10','svg-level-10')
    this.delayRotateStop('level11','svg-level-11')
    this.delayRotateStop('labels','labels')
  },
  restoreAnimation(){
    this.delayRotateStart('level1','svg-level-1','rotate1')
    this.delayRotateStart('level2','svg-level-2','rotate2')
    this.delayRotateStart('level5','svg-level-5','rotate5')
    this.delayRotateStart('level6','svg-level-6','rotate6')
    this.delayRotateStart('level7','svg-level-7','rotate7')
    this.delayRotateStart('level10','svg-level-10','rotate10')
    this.delayRotateStart('level11','svg-level-11','rotate11')
    this.delayRotateStart('labels','labels','rotate13')
    rotate1()
    rotate2()
    rotate3()
    document.getElementById('level14').innerHTML = '';
    clearTimeout(window.config.showConTimer_1);
    clearTimeout(window.config.showConTimer_2);
    $("#showContainer,#verticalLine").stop(false, true);
    document.getElementById('showContainer').style.height= 0+'px';
    document.getElementById('verticalLine').style.visibility = 'hidden';
    $('.label-box').removeClass('label-box-over');
    $('#level-light').find('div').addClass('none');
    $('#classify_1,#classify_2,#classify_3,#classify_4,#classify_5').attr('class','st1');
    $('#level8').find('path').attr('class','st2');
    $('#level14').empty();
  },
  verticalMiddle(){
    let pageH = +$(document).height();
    $('#homepageBg').css({'height':parseInt($(document).height())+ 'px'})
    $('#box').css({'margin-top':(pageH-640)/2})
  }
}

module.exports = {animation}


